<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Music Player</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <style>
        /* Custom styles here */
    </style>
</head>
<body>

<div class="container">
    <h1>Bootstrap Music Player</h1>
    <button class="btn btn-primary" id="playButton">Play</button>
    <button class="btn btn-primary" id="pauseButton">Pause</button>
    <button class="btn btn-primary" id="stopButton">Stop</button>

    <!-- Music list here -->
    <table class="table" id="musicList">
        <thead>
        <tr>
            <th>Title</th>
            <th>Artist</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <!-- Music list items here -->
        <tr>
            <td>周杰伦</td>
            <td>夜曲</td>
            <td><a href="#"  class="playLink">播放</a></td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        // AJAX call to get music list
        $.ajax({
            url: '/api/music/list', // Replace with your actual API endpoint
            type: 'GET',
            success: function(data) {
                $.each(data, function(index, item) {
                    $('#musicList tbody').append(
                        '<tr>' +
                        '<td>' + item.title + '</td>' +
                        '<td>' + item.artist + '</td>' +
                        '<td><a href="#" class="playLink" data-id="' + item.id + '">Play</a></td>' +
                        '</tr>'
                    );
                });

                // Handle play button click
                $('.playLink').click(function() {
                    var musicId = $(this).data('id');
                    $.ajax({
                        url: '/api/music/play/' + musicId, // Replace with your actual API endpoint
                        type: 'GET',
                        success: function() {
                            console.log('Music is playing');
                        }
                    });
                });
            }
        });
    });
</script>

</body>
</html>